<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<meta name="decorator" content="ani"/>
	<title>${fns:getConfig("productName")}</title>
	<style>
		:root {
			--primary-color: #00d8ff;
			--secondary-color: #0084ff;
			--dark-color: #0a192f;
			--light-color: #ccd6f6;
			--accent-color: #64ffda;
			--glow-color: rgba(100, 255, 218, 0.6);
		}

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
		}

		body {
			background-color: var(--dark-color);
			color: var(--light-color);
			display: flex;
			justify-content: center;
			align-items: center;
			min-height: 100vh;
			overflow: hidden;
			position: relative;
		}

		/* 粒子背景 */
		#particles-js {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		/* 登录卡片 */
		.login-container {
			position: relative;
			z-index: 2;
			width: 420px;
			padding: 50px;
			background: rgba(10, 25, 47, 0.85);
			border-radius: 16px;
			box-shadow: 0 8px 32px rgba(0, 136, 255, 0.3);
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			border: 1px solid rgba(100, 255, 218, 0.3);
			overflow: hidden;
			transform-style: preserve-3d;
			perspective: 1000px;
		}

		.login-container::before {
			content: '';
			position: absolute;
			top: -50%;
			left: -50%;
			width: 200%;
			height: 200%;
			background: linear-gradient(
					to bottom right,
					transparent 0%,
					rgba(0, 216, 255, 0.1) 50%,
					transparent 100%
			);
			transform: rotate(30deg);
			z-index: -1;
			animation: gradientRotate 15s linear infinite;
		}

		.login-container::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border: 1px solid transparent;
			border-radius: 16px;
			background: linear-gradient(135deg, rgba(0, 216, 255, 0.2), rgba(100, 255, 218, 0.1)) border-box;
			-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
			-webkit-mask-composite: destination-out;
			mask-composite: exclude;
			pointer-events: none;
		}

		.login-header {
			text-align: center;
			margin-bottom: 40px;
			position: relative;
		}

		.login-logo {
			width: 80px;
			height: 80px;
			margin: 0 auto 20px;
			border-radius: 50%;
			background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
			display: flex;
			justify-content: center;
			align-items: center;
			color: white;
			font-size: 32px;
			box-shadow: 0 4px 30px rgba(0, 216, 255, 0.4);
			position: relative;
			z-index: 1;
		}

		.login-logo::after {
			content: '';
			position: absolute;
			top: -5px;
			left: -5px;
			right: -5px;
			bottom: -5px;
			border-radius: 50%;
			background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
			z-index: -1;
			filter: blur(10px);
			opacity: 0.7;
		}

		.login-title {
			font-size: 28px;
			font-weight: 600;
			margin-bottom: 10px;
			background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			position: relative;
			display: inline-block;
		}

		.login-title::after {
			content: '';
			position: absolute;
			bottom: -5px;
			left: 0;
			width: 100%;
			height: 2px;
			background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
			transform: scaleX(0);
			transform-origin: right;
			transition: transform 0.3s ease;
		}

		.login-header:hover .login-title::after {
			transform: scaleX(1);
			transform-origin: left;
		}

		.login-subtitle {
			font-size: 14px;
			color: rgba(204, 214, 246, 0.7);
			letter-spacing: 1px;
		}

		/* 输入框样式 */
		.input-group {
			position: relative;
			margin-bottom: 30px;
			width: 100%;
		}

		.input-group input {
			width: 100%;
			padding: 15px 20px 15px 50px;
			background: rgba(100, 255, 218, 0.05);
			border: 1px solid rgba(100, 255, 218, 0.3);
			border-radius: 8px;
			color: var(--light-color);
			font-size: 16px;
			transition: all 0.3s ease;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
		}

		.input-group input:focus {
			outline: none;
			border-color: var(--accent-color);
			box-shadow: 0 0 0 2px rgba(100, 255, 218, 0.2),
			0 4px 20px rgba(0, 216, 255, 0.3);
			background: rgba(100, 255, 218, 0.1);
		}

		.input-group i {
			position: absolute;
			left: 20px;
			top: 50%;
			transform: translateY(-50%);
			color: var(--accent-color);
			font-size: 18px;
			transition: all 0.3s ease;
		}

		.input-group input:focus ~ i {
			color: var(--primary-color);
			text-shadow: 0 0 10px var(--glow-color);
		}

		.input-label {
			position: absolute;
			left: 50px;
			top: 15px;
			color: rgba(204, 214, 246, 0.7);
			font-size: 16px;
			transition: all 0.3s ease;
			pointer-events: none;
		}

		.input-group input:focus + .input-label,
		.input-group input:not(:placeholder-shown) + .input-label {
			top: -10px;
			left: 20px;
			font-size: 12px;
			background: var(--dark-color);
			padding: 0 5px;
			color: var(--accent-color);
			text-shadow: 0 0 5px var(--glow-color);
		}

		/* 登录按钮 */
		.login-btn {
			width: 100%;
			padding: 16px;
			background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
			border: none;
			border-radius: 8px;
			color: white;
			font-size: 16px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
			margin-top: 20px;
			box-shadow: 0 4px 15px rgba(0, 216, 255, 0.3);
			letter-spacing: 1px;
			text-transform: uppercase;
		}

		.login-btn:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 25px rgba(0, 216, 255, 0.4);
		}

		.login-btn:active {
			transform: translateY(0);
		}

		.login-btn::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
			transition: all 0.7s ease;
		}

		.login-btn:hover::before {
			left: 100%;
		}

		.login-btn span {
			position: relative;
			z-index: 1;
		}

		/* 响应式设计 */
		@media (max-width: 480px) {
			.login-container {
				width: 90%;
				padding: 30px;
			}
		}

		/* 动画效果 */
		@keyframes float {
			0%, 100% {
				transform: translateY(0);
			}
			50% {
				transform: translateY(-10px);
			}
		}

		@keyframes gradientRotate {
			0% {
				transform: rotate(30deg);
			}
			100% {
				transform: rotate(390deg);
			}
		}

		@keyframes pulse {
			0%, 100% {
				opacity: 0.5;
			}
			50% {
				opacity: 1;
			}
		}

		.login-logo {
			animation: float 4s ease-in-out infinite;
		}

		/* 错误消息样式 */
		.error-message {
			color: #ff6b6b;
			font-size: 14px;
			margin-top: 5px;
			text-align: center;
			text-shadow: 0 0 5px rgba(255, 107, 107, 0.3);
		}

		/* 版权信息 */
		.copyright {
			position: absolute;
			bottom: 20px;
			left: 0;
			right: 0;
			text-align: center;
			color: rgba(204, 214, 246, 0.5);
			font-size: 12px;
			z-index: 2;
		}
	</style>
	<script>
		if (window.top !== window.self) {
			window.top.location = window.location;
		}
	</script>
</head>

<body>
<!-- 粒子背景 -->
<div id="particles-js"></div>

<div class="login-container">
	<form id="loginForm" role="form" action="${ctx}/login" method="post" class="login-form">
		<div class="login-header">
			<div class="login-logo">
				<i class="fas fa-user-shield"></i>
			</div>
			<h1 class="login-title">${fns:getConfig("productName")}</h1>
			<p class="login-subtitle">安全认证系统</p>
		</div>

		<div class="input-group">
			<i class="fas fa-user"></i>
			<input type="text" id="username" name="username" placeholder=" " autocomplete="off" required>
			<label class="input-label">用户名</label>
		</div>

		<div class="input-group">
			<i class="fas fa-lock"></i>
			<input type="password" id="password" name="password" placeholder=" " required>
			<label class="input-label">密码</label>
		</div>

		<button type="submit" class="login-btn" onclick="login()">
			<span>登 录</span>
		</button>

		<div id="loginError" class="error-message">
			<c:if test="${not empty message}">${message}</c:if>
		</div>
	</form>
</div>

<div class="copyright">
	© ${fns:getConfig("productName")} ${fns:getConfig("version")}
</div>

<!-- 引入粒子动画库 -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
	// 初始化粒子动画
	document.addEventListener('DOMContentLoaded', function() {
		particlesJS('particles-js', {
			particles: {
				number: { value: 80, density: { enable: true, value_area: 800 } },
				color: { value: "#64ffda" },
				shape: { type: "circle" },
				opacity: { value: 0.5, random: true },
				size: { value: 3, random: true },
				line_linked: {
					enable: true,
					distance: 150,
					color: "#00d8ff",
					opacity: 0.3,
					width: 1
				},
				move: {
					enable: true,
					speed: 2,
					direction: "none",
					random: true,
					straight: false,
					out_mode: "out",
					bounce: false
				}
			},
			interactivity: {
				detect_on: "canvas",
				events: {
					onhover: { enable: true, mode: "repulse" },
					onclick: { enable: true, mode: "push" }
				},
				modes: {
					repulse: { distance: 100, duration: 0.4 },
					push: { particles_nb: 4 }
				}
			},
			retina_detect: true
		});
	});

	$(document).ready(function() {
		$("#loginForm").validate({
			messages: {
				username: { required: "请填写用户名" },
				password: { required: "请填写密码" }
			},
			errorLabelContainer: "#loginError",
			errorPlacement: function(error, element) {
				error.appendTo($("#loginError"));
			}
		});
	});

	// 如果在框架或在对话框中，则弹出提示并跳转到首页
	if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0){
		alert('未登录或登录超时。请重新登录，谢谢！');
		top.location = "${ctx}";
	}

	$(function () {
		if('${message}' != ''){
			// 显示错误消息
			$("#loginError").html("${message}").show();

			if('${message}'.startsWith("License")){
				var s = "<a style=\"color: var(--accent-color); text-decoration: none; margin-top: 10px; display: inline-block;\" href=\"javascript:void(0)\" onclick=\"getMechine()\">获取机器码</a>";
				$("#loginError").after(s);
			}
		}
	});

	$(document).on("keydown", function(event) {
		if(event.keyCode == 13){
			login();
		}
	});

	function login() {
		jp.loading("登录中...");
		$("#loginForm").submit();
	}

	/**
	 * 获取机器码
	 */
	function getMechine(){
		$.get('${ctx}/getMechine', function(result){
			if(result.success){
				// 创建漂亮的弹窗显示机器码
				layer.open({
					type: 1,
					title: '<i class="fas fa-fingerprint"></i> 机器码',
					skin: 'layui-layer-tech',
					area: ['400px', '200px'],
					content: '<div style="padding:20px;font-family:monospace;background:#0a192f;color:#64ffda;border:1px solid #64ffda;border-radius:5px;">' +
							'<p style="margin-bottom:15px;">请复制以下机器码：</p>' +
							'<div style="background:rgba(100,255,218,0.1);padding:10px;border-radius:4px;word-break:break-all;">' + result.msg + '</div>' +
							'</div>',
					btn: ['复制', '关闭'],
					btn1: function(index, layero){
						navigator.clipboard.writeText(result.msg).then(function() {
							layer.msg('已复制到剪贴板', {icon: 1});
						}, function() {
							layer.msg('复制失败', {icon: 2});
						});
					}
				});
			} else {
				jp.error(result.msg);
			}
		});
	}
</script>
</body>
</html>
